<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>交叉轴的对齐方式</title>
		<style>
			.item {
				width: 100px;
				height: 100px;
				border: 2px solid red;
				font-size: 30px;
			}
			/* 交叉轴的对齐方式 */
			/* 交叉轴为竖直方向时的项目对齐方式 */
			.box {
				background-color:lightblue;
				display: flex; /* 默认主轴是行模式 水平的 */
				/* 默认使用行模式，此时交叉轴是垂直的 */
				/* 交叉轴的使用前提：在交叉轴方向有空间的空间可以移动 */
				height: 300px;
				align-items: flex-start;
				align-items: flex-end;
				align-items: center;
			}
			/* 交叉轴为水平方向时的项目对齐方式 */
			.box2 {
				background-color: lightpink;
				display: flex;
				flex-direction: column; /* 调整主轴为列模式也就是竖直方向 */
				align-items: flex-start;
				align-items: flex-end;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<div class="box2">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
	</body>
</html>